/*
  学习目标：useEffect第二个参数使用小结
*/

import React, { useEffect, useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('Hello React');

  // 1. 是空数组[]
  // 作用: 挂载后， 等同于componentDidMount
  // 场景：💥发请求、监听dom事件、开启定时器

  // 2. [依赖项]
  // 代表: 更新挂载二合一，等同于componentDidMount 和 componentDidUpdate
  // 场景：💥做缓存
  // 类似vue中的watch，开启了immediately
  // 特点： 只会监听依赖项的变化
  useEffect(() => {
    // console.log('有依赖项执行了  ----->  ');
  }, [count]);

  // 3. 不写第二个参数
  // 代表： 更新挂载二合一，等同于componentDidMount 和 componentDidUpdate
  // 场景： 👎几乎不用
  // 特点：会监听所有状态的变化，
  // 缺点： 容易造成性能浪费， 容易造成界面卡顿
  useEffect(() => {
    console.log('无依赖项执行了  ----->  ');
  });
  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我+1
      </button>
      <button
        onClick={() => {
          setMsg(msg + '~');
        }}
      >
        点我+~
      </button>
    </div>
  );
}
